<template>
  <div>
    <div ref="echartsbox" class="echartsbox"></div>
  </div>
</template>

<script>
import Echarts from "echarts";
export default {
  props: {
    option: {
      type: Object,
      default: () => {},
    },
  },
 
  methods: {
    renderEchatrs() {
      var myChart = Echarts.init(this.$refs.echartsbox);
      var option = {
        title: {
          text: this.option.title, //表名
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: this.option.data,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.option.xData,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: this.option.data[0],
            type: "line",
            stack: "总量",
            data: this.option.orderData,
          },
          {
            name: this.option.data[1],
            type: "line",
            stack: "总量",
            data: this.option.amountData,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
  mounted() {
      this.renderEchatrs()
  },
};
</script>

<style lang="less" scoped>
.echartsbox {
  padding:30px;
  width: 100%;
  height: 450px;
  background-color: #fff;
  box-sizing: border-box;
}
</style>